<!-- WebComponent example based off element-boilerplate: https://github.com/webcomponents/element-boilerplate -->
<template>
    <style> 
[class^="weui-icon-"],
[class*=" weui-icon-"] {
  display: inline-block;
  vertical-align: middle;
  font: normal normal normal 14px/1 "weui";
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
[class^="weui-icon-"]:before,
[class*=" weui-icon-"]:before {
  display: inline-block;
  margin-left: .2em;
  margin-right: .2em;
}
.weui-icon-circle:before {
  content: "\EA01";
}
/* '' */
.weui-icon-download:before {
  content: "\EA02";
}
/* '' */
.weui-icon-info:before {
  content: "\EA03";
}
/* '' */
.weui-icon-safe-success:before {
  content: "\EA04";
}
/* '' */
.weui-icon-safe-warn:before {
  content: "\EA05";
}
/* '' */
.weui-icon-success:before {
  content: "\EA06";
}
/* '' */
.weui-icon-success-circle:before {
  content: "\EA07";
}
/* '' */
.weui-icon-success-no-circle:before {
  content: "\EA08";
}
/* '' */
.weui-icon-waiting:before {
  content: "\EA09";
}
/* '' */
.weui-icon-waiting-circle:before {
  content: "\EA0A";
}
/* '' */
.weui-icon-warn:before {
  content: "\EA0B";
}
/* '' */
.weui-icon-info-circle:before {
  content: "\EA0C";
}
/* '' */
.weui-icon-cancel:before {
  content: "\EA0D";
}
/* '' */
.weui-icon-search:before {
  content: "\EA0E";
}
/* '' */
.weui-icon-clear:before {
  content: "\EA0F";
}
/* '' */
.weui-icon-back:before {
  content: "\EA10";
}
/* '' */
.weui-icon-delete:before {
  content: "\EA11";
}
/* '' */
[class^="weui-icon_"]:before,
[class*=" weui-icon_"]:before {
  margin: 0;
}
.weui-icon-success {
  font-size: 23px;
  color: #09BB07;
}
.weui-icon-waiting {
  font-size: 23px;
  color: #10AEFF;
}
.weui-icon-warn {
  font-size: 23px;
  color: #F43530;
}
.weui-icon-info {
  font-size: 23px;
  color: #10AEFF;
}
.weui-icon-success-circle {
  font-size: 23px;
  color: #09BB07;
}
.weui-icon-success-no-circle {
  font-size: 23px;
  color: #09BB07;
}
.weui-icon-waiting-circle {
  font-size: 23px;
  color: #10AEFF;
}
.weui-icon-circle {
  font-size: 23px;
  color: #C9C9C9;
}
.weui-icon-download {
  font-size: 23px;
  color: #09BB07;
}
.weui-icon-info-circle {
  font-size: 23px;
  color: #09BB07;
}
.weui-icon-safe-success {
  color: #09BB07;
}
.weui-icon-safe-warn {
  color: #FFBE00;
}
.weui-icon-cancel {
  color: #F43530;
  font-size: 22px;
}
.weui-icon-search {
  color: #B2B2B2;
  font-size: 14px;
}
.weui-icon-clear {
  color: #B2B2B2;
  font-size: 14px;
}
.weui-icon-delete.weui-icon_gallery-delete {
  color: #FFFFFF;
  font-size: 22px;
}
.weui-icon_msg {
  font-size: 93px;
}
.weui-icon_msg.weui-icon-warn {
  color: #F76260;
}
.weui-icon_msg-primary {
  font-size: 93px;
}
.weui-icon_msg-primary.weui-icon-warn {
  color: #FFBE00;
}
    </style> 
    <i class=""></i>
</template>
<script>
    (function() {
        // Creates an object based in the HTML Element prototype
        var element = Object.create(HTMLElement.prototype); 
        // Fires when an instance of the element is created
        var nodeDocument = document.currentScript.ownerDocument;
        element.createdCallback = function() {
            // Gets content from <template>
            var tagA = nodeDocument.querySelector('template').content.querySelector("i");
            var nodeAttrClassName = this.getAttribute('data-classname'); 
            tagA.className = nodeAttrClassName;

            var template = nodeDocument.querySelector('template').content;
            // Creates the shadow root
            var shadowRoot = this.createShadowRoot();
            // Adds a template clone into shadow root
            var clone = document.importNode(template, true);
            //console.log(shadowRoot.)
            shadowRoot.appendChild(clone);
        };
        document.registerElement('wx-icon', {
            prototype: element
        });
    }());
</script>